import { DashboardOutlined, EnvironmentOutlined, SettingOutlined, UnorderedListOutlined } from '@ant-design/icons';
import { Breadcrumb, Layout, Menu } from 'antd';
import React, { useState } from 'react';
import ApiDocumentation from './ApiDocumentation';
import DataOverview from './DataOverview';
import DateTimeDisplay from './DateTimeDisplay';
import DeviceInfo from './DeviceInfo';
import ReservoirTemperature from './ReservoirTemperature';

const { Content, Footer, Sider } = Layout;

const Home = () => {
  const [selectedMenu, setSelectedMenu] = useState('1');

  const renderContent = () => {
    switch (selectedMenu) {
      case '1':
        return <DataOverview />;
      case '2':
        return <ReservoirTemperature />;
      case '3':
        return <DeviceInfo />;
      case '4':
        return <ApiDocumentation />;
      default:
        return <DataOverview />;
    }
  };

  const getBreadcrumb = () => {
    switch (selectedMenu) {
      case '1':
        return '概览';
      case '2':
        return '环境温度';
      case '3':
        return '设备管理';
      case '4':
        return 'API接口';
      default:
        return '概览';
    }
  };

  return (
    <Layout style={{ minHeight: '100vh', backgroundColor: '#f0f2f5' }}>
      <Sider collapsible style={{ backgroundColor: '#001529' }}>
        <div className="logo" style={{ color: 'white', textAlign: 'center', padding: '16px', fontSize: '20px' }}>
          水生态环境检测
        </div>
        <Menu 
          theme="dark" 
          defaultSelectedKeys={['1']} 
          mode="inline"
          onSelect={({ key }) => setSelectedMenu(key)}
        >
          <Menu.Item key="1" icon={<DashboardOutlined />}>
            概览
          </Menu.Item>
          <Menu.Item key="2" icon={<EnvironmentOutlined />}>
            环境温度
          </Menu.Item>
          <Menu.Item key="3" icon={<SettingOutlined />}>
            设备管理
          </Menu.Item>
          <Menu.Item key="4" icon={<UnorderedListOutlined />}>
            API接口
          </Menu.Item>
        </Menu>
      </Sider>
      <Layout className="site-layout">
        <Content style={{ margin: '0 16px', backgroundColor: '#fff', padding: '20px', borderRadius: '8px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <Breadcrumb style={{ margin: '10px 0', fontSize: '16px' }}>
              <Breadcrumb.Item onClick={() => setSelectedMenu('1')} style={{ cursor: 'pointer' }}>
                首页
              </Breadcrumb.Item>
              <Breadcrumb.Item>{getBreadcrumb()}</Breadcrumb.Item>
            </Breadcrumb>
            <DateTimeDisplay />
          </div>
          <div className="site-layout-background" style={{ padding: 16, minHeight: 360 }}>
            {renderContent()}
          </div>
        </Content>
        <Footer style={{ textAlign: 'center', backgroundColor: '#001529', color: 'white' }}>水生态环境检测 ©2023</Footer>
      </Layout>
    </Layout>
  );
};

export default Home;
